import React from "react";
import Navbar from '@/component/Navbar/navbar'
import './mark.scss'
import cx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActionArea from '@material-ui/core/CardActionArea';
import { types } from "@/api";
import { IObjectKeys } from "@/api/types";

const useStyles = makeStyles(() => ({
    root: {
        maxWidth: 343,
        margin: '16px auto',

    },
    media: {
        borderRadius: 6,
        height: 200
    },
    subTitle: {
        fontSize: 14,
    },
    dish: {
        paddingTop: 20
    }
}));

export default function Marke(props: types.IObjectKeys) {
    const styles = useStyles();
    const { makes } = props;

    const getCards = () => makes.map((make: IObjectKeys, index: number) => {
        return <Card className={cx(styles.root)} key={index}>
            <CardActionArea>
                <CardMedia
                    className={cx(styles.media)}
                    image={
                        make.pictures[0]
                    }
                />
            </CardActionArea>

            <CardContent>
                <span style={{color: 'red'}}>{index + 1}. </span>{make.describe}
            </CardContent>
        </Card>
    })

    return (
        <div style={{height: '100%', paddingBottom: '1px'}}>
            {getCards()}
        </div>
    )
}